<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <script src="./js/vue.global.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/qs.min.js"></script>
    <script>
        
    </script>
</head>
<body>
    <div id="app">
        <button @click="onLoginClick">登录</button>
    </div>
    <script>
        const vm = Vue.createApp({
            data(){
                return {

                }
            },
            methods:{
                onLoginClick() {
                    //vue中通过axios给服务器传消息
                    axios({
                        method:"post",
                        // url:"http://localhost:8080/tologin",
                        url:"https://3098l4z890.picp.vip/tologin",
                        data:Qs.stringify({         //需要通过Qs的stringify转成formdata的形式
                            "userName":"admin",     //model绑定的username
                            "password":"123456"     //model绑定的password
                        }),
                        responseType: "json",
                    }).then(function(info) {
                        if(info.data.success){
                            alert("登陆成功,准备跳转");
                            //跳转功能实现
                        }else{
                            alert("登录失败，请重试");
                            //清空密码框
                        }
                    }).catch(function(error) {
                        console.log(error);
                    })
                }
            }
        }).mount("#app");
    </script>

</body>
</html>